<template>
  <el-dialog
    title="提示"
    :visible.sync="visible"
    :modal="false"
    width="1947px"
    :before-close="handleClose">
    <div class="flex-between title" slot="title">
      <span>{{title}}</span>
      <img @click="handleClose" class="close-btn" src="../../../assets/imgs/close_btn.png" alt="">
    </div>
    <div class="dialog-body">
      <div class="left-menu flex-column-center">
        <div class="p-r menu-box" v-for="item in leftMenus">
          <div class="meun-btn "
               @click="menuClick(item)"
               :class="{'active':item.type === activeMenu}"
              >
            {{item.name}}
            <i v-if="item.children && item.children.length" class="arrow el-icon-caret-bottom"></i>
          </div>
          <div class="sub-menu"  v-if="item.children && item.children.length && item.toggle">
            <div class="sub-menu-btn" @click="childMenuClick(child,item.type)" v-for="child in item.children">{{child.name}}</div>
          </div>
        </div>

      </div>
      <div class="right-container">
        <device-pannel v-show="activeMenu === 'device'"
                       :params="params"
                       ref="device"></device-pannel>
        <experimental-pannel :params="params"
                             v-show="activeMenu === 'experimental'"
                             ref="experimental"></experimental-pannel>
        <energy-consuming-pannel ref="energy"
                                 v-show="activeMenu === 'energy'"
                                 :params="params"></energy-consuming-pannel>
        <monitor-pannel ref="monitor"  v-show="activeMenu === 'monitor'"></monitor-pannel>
      </div>
    </div>

  </el-dialog>
</template>
<script>
  import devicePannel from './components/device-pannel'
  import experimentalPannel from './components/experimental-pannel'
  import energyConsumingPannel from './components/energy-consuming-pannel'
  import monitorPannel from './components/monitor-pannel'

  export default {
    name:'detail-modal',
    components:{
      devicePannel,experimentalPannel,energyConsumingPannel,monitorPannel
    },
    props:{
      title:{
        type:String,
        default:''
      }
    },
    data(){
      return{
        visible:false,
        activeMenu:"device",
        params:{},
        leftMenus:[
          {
            name:'设备信息',
            type:'device'
          },{
            name:'实验数据',
            type:'experimental'
          },{
            name:'监控设备',
            type:'monitor',
            toggle:false,
            children:[
              {
                name:'设备1'
              },{
                name:'设备2'
              }
            ]
          },{
            name:'能耗设备',
            type:'energy'
          }
        ]
      }
    },
    methods:{
      menuClick(val){
        if(val.children && val.children.length){
          val.toggle = !val.toggle
        }else {
          this.activeMenu = val.type
          this.$refs[this.activeMenu].getData()
        }

      },
      handleClose(){
        this.visible = false
        this.params = {}
        this.$refs.experimental.experimentalData = []
        this.$refs.device.chartsList = []
        this.$refs.energy.chartsList = []
      },
      childMenuClick(child,type){
        this.activeMenu = type
      },
      showModal(data){
        this.params = data;
        this.visible = true
        this.$nextTick(()=>{
          this.menuClick(data)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-body{
    height: 1200px;
    display: flex;
    align-items: flex-start;
    .left-menu{
      width: 13.3%;
      flex: none;
      position: relative;
      &:after{
        position: absolute;
        width: 1px;
        height: 1122px;
        background: rgba(142, 187, 254, 0.24);
        content: '';
        right: 0;

      }
      .menu-box{
        .meun-btn{
          width: 144px;
          height: 48px;
          background: rgba(16, 104, 255, 0.16);
          border-radius: 4px;
          font-size: 24px;
          line-height: 48px;
          text-align: center;
          cursor: pointer;
          color: rgba(255, 255, 255, 0.37);
          .arrow{
            font-size: 16px;
          }
          &:hover{
            color: rgba(255, 255, 255, 1);
          }
          &.active{
            color: rgba(255, 255, 255, 1);
          }

        }
        .sub-menu{
          margin-top: 12px;
          background: rgba(16, 104, 255, 0.16);
          width: 144px;
          padding: 20px 0;
          .sub-menu-btn{
            color: rgba(255,255,255,0.37);
            text-align: center;
            font-size: 24px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            &:hover{
              color: #fff;
            }
            &.active{
              color: #fff;
            }
          }
          .sub-menu-btn+.sub-menu-btn{
            margin-top: 20px;
          }
        }
      }

      .menu-box+.menu-box{
        margin-top: 38px;
      }
    }
    .right-container{
      flex: 1;
      height: 100%;
    }

  }
</style>
